<template>
  <div class="dashboard">
    <a-row class="panels" :gutter="16">
      <a-col class="gutter-row" :span="12" :lg="6">
        <panel color="#6C7B8B" title="产品管理" :num="16">
          <!-- <img :src="proSvg" width="30" alt="" /> -->
          <proSvg />
        </panel>
      </a-col>
      <a-col class="gutter-row" :span="12" :lg="6">
        <panel color="#5D478B" title="Banner管理" :num="24">
          <banSvg />
        </panel>
      </a-col>
      <a-col class="gutter-row" :span="12" :lg="6">
        <panel color="#8B8682" title="关于我们" :num="35">
          <abtSvg />
        </panel>
      </a-col>
      <a-col class="gutter-row" :span="12" :lg="6">
        <panel color="#01a1aa" title="用户" :num="23">
          <useSvg />
        </panel>
      </a-col>
    </a-row>
    <EchartsLine />
    <a-row>
      <a-col :span="12">
        <EchartsLine />
      </a-col>
      <a-col :span="12">
        <EchartsLine />
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
//  import {
//    getProNumApi,
//    getAboutNumApi,
//    getBannerNumApi,
//    getUsersNumApi,
// } from "@/api/dashboard";
import Panel from "@/components/panel";
import * as countsApi from "@/api/dashboard";
import EchartsLine from "./echartsLine.vue";
import proSvg from "@/assets/svg/pro.svg";
import banSvg from "@/assets/svg/ban.svg";
import abtSvg from "@/assets/svg/abt.svg";
import useSvg from "@/assets/svg/use.svg";

const keys = Object.keys(countsApi).map((item) =>
  item.slice(3, item.length - 6).toLowerCase()
);
const nums = ref({});

const getCountApi = () => {
  const arr = Object.values(countsApi);
  return Promise.all(arr.map((item) => item()));
};
// 获取数据
getCountApi().then((res) => {
  console.log(res);
  const obj = {};
  keys.forEach((item, index) => {
    obj[item] = res[index];
  });
  console.log(obj);
  nums.value = obj;
});
</script>

<style scoped>
.panels {
  padding: 20px;
}
.dashboard {
  background-color: #f0f2f5;
}
.gutter-row {
  margin: 10px 0;
}
</style>
